import React, { useState } from "react";
import CityData from "../../citys";
import "./style.scss";
import { useNavigate } from "react-router-dom";
console.log(CityData);
const City = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const navigate = useNavigate();
  const handleClick = (city) => {
    localStorage.setItem("city", city);
    navigate("/info");
  };
  return (
    <div className="city">
      <ul className="left">
        {CityData.map((v, i) => {
          return (
            <li
              key={i}
              className={i === activeIndex ? "active" : ""}
              onClick={() => setActiveIndex(i)}
            >
              {v.name}
            </li>
          );
        })}
      </ul>

      <ul className="right">
        {CityData[activeIndex].city.map((v, i) => {
          return (
            <li key={i} onClick={() => handleClick(v.name)}>
              {v.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default City;
